import React from 'react';
import { Drawer, Box, List, ListItemButton, ListItemText, Toolbar } from '@mui/material';
import ToolbarComponent from '../Toolbar';
import { useUIStore } from '../../store/uiStore';

/**
 * 侧边栏组件
 * 包含节点工具栏和设置列表
 */
export const Sidebar: React.FC = () => {
  const { activeRightPanel, setActiveRightPanel } = useUIStore();

  return (
    <Drawer
      variant="permanent"
      sx={{
        width: 240,
        flexShrink: 0,
        [`& .MuiDrawer-paper`]: { width: 240, boxSizing: 'border-box' },
      }}
    >
      <Toolbar /> {/* 占位符，与 AppBar 高度对齐 */}
      <Box sx={{ overflow: 'auto' }}>
        {/* 节点工具栏 */}
        <ToolbarComponent />
        <List>
          {[
            { text: '属性', panel: 'properties' },
            { text: '设置', panel: 'settings' }
          ].map((item) => (
            <ListItemButton
              key={item.text}
              selected={activeRightPanel === item.panel}
              onClick={() => setActiveRightPanel(item.panel as 'properties' | 'settings')}
            >
              <ListItemText primary={item.text} sx={{ paddingLeft: 2 }} />
            </ListItemButton>
          ))}
        </List>
      </Box>
    </Drawer>
  );
};